import React from 'react'

import ReactDOM from 'react-dom/client'

// 如何封装组件

// 组件分为两类:
// 1. 类组件 2. 函数组件

// 函数组件
// 1. 函数组件的组件名首字母要大写 2. 函数组件中必须写return. return的值就是封装jsx结构,如果没有jsx结构,则要在return后面写null

//定义函数组件
function List() {
  return (
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  )
}

const div = (
  <div>
    ================================================================
    {/* 使用函数组件, 使用组件的代码写在哪里,组件的结构就渲染在哪里 */}
    {/* <List></List> */}
    <hr />
    {/* <List /> */}
    <List></List>
  </div>
)

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(div)
